<template>
	<view class="goods">
		<view class="code">
			<canvas class="ma" style="width: 400px;height: 400px;display: block;;" canvas-id="couponQrcode"></canvas>
		</view>
		
		<view class="serviceCode">
			<view class="service">服务</view>
			<view v-for="(item,index) in msg" :key="index" class="elseMsg elseMsgWidth" @click="grade(index)">
				<view class="img" :class="im[index]"></view>
				<text class="elseMsgText">{{msg[index]}}</text>
			</view>
			<view class="record">领取记录</view>
		</view>
	</view>
</template>

<script>
	const qrCode = require('./weapp-qrcode.js')
	export default {
		name: "IndexHeader",
		data() {
			return {
				im:["serviceImg1","serviceImg2","serviceImg3"],
				msg:["请假申请","宿舍维修","用品领取"]
			}
		},
		onLoad() {
			setTimeout(() => {
				this.couponQrCode()
			}, 50)
		},
		methods:{
			// 二维码生成工具
			couponQrCode() {
				new qrCode('couponQrcode', {
					// text: "http:// 172.17.12.228:8089/#/my",
					text: "领取记录：2020年9月9日领取军训服, 2021年1月2日领取床上用品, 2021年5月9日领取百年校庆纪念品 ",
					width: 200,
					height: 200,
					colorDark: "#333333",
					colorLight: "#FFFFFF",
					correctLevel: qrCode.CorrectLevel.H
				})
			},
			grade(index){
				if(index === 0 ){
					uni.navigateTo({
						url: 'leave'
					});
				}else if(index === 1){
					uni.navigateTo({
						url: 'repair'
					});
				}else if(index === 5){
					uni.navigateTo({
						url: 'goods'
					});
				}
			}
		},
	}
</script>

<style scoped src="../../static/css/home.css"></style>
<style scoped src="../../static/css/service.css"></style>
